<script setup>
import { ref } from 'vue'
// onActivated 和 onDeactivated 是 Vue 3 提供的生命周期钩子，专门用于 KeepAlive 组件包裹的组件。
// 这些钩子允许你在组件被激活（从缓存中恢复）和停用（进入缓存）时执行特定的逻辑。
import { onActivated, onDeactivated } from 'vue'

const count = ref(0)

//onActivated：当组件被激活时调用。这通常发生在组件从缓存中恢复时。
onActivated(() => {
  console.log('ComA onActivated')
})

//onDeactivated：当组件被停用时调用。这通常发生在组件进入缓存时。
onDeactivated(() => {
  console.log('ComA onDeactivated')
})
</script>

<template>
    <p>Current component: A</p>
    <span>count: {{ count }}</span>
    <button @click="count++">+</button>
</template>